<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="__ZUI__css/zui.min.css">
    <link rel="stylesheet" href="__ZUI__css/zui-theme.css">
    <script src="__INDEX__js/echarts.js"></script>
    {block name="css"}
    <link rel="stylesheet" href="__INDEX__reset.css">
    <style type="text/css"></style>
    {/block}
</head>
<body>

<nav class="navbar navbar-inverse" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-example">
                <span class="sr-only">切换导航</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="http://100-1.cc">BTC Block</a>
        </div>
        <div class="collapse navbar-collapse navbar-collapse-example">
            <ul class="nav navbar-nav">
                <li><a href="#">块区</a></li>
                <li><a href="#">数据图表</a></li>
                <li><a href="#">管理</a></li>
                <li><a href="#">地址工具</a></li>
            </ul>
        </div>
    </div>
</nav>

<!-- BTC Block List -->
<div class="container">

    <div class="panel panel-success">
        <div class="panel-heading">
            <h2>
                <i class="icon icon-bar-chart-alt icon-3x"></i>
                BitCoin <small>最新5个块区 (每隔5分钟 更新一次数据)</small>
            </h2>
        </div>
        <div class="table-responsive">
            <table class="table table-hover table-borderless">
                <thead>
                <tr>
                    <th class="col-md-1">块高度</th>
                    <th class="col-md-1">广播者</th>
                    <th class="col-md-1">交易量</th>
                    <th class="col-md-2">块收益</th>
                    <th class="col-md-2">块大小(Bytes)</th>
                    <th class="col-md-5">哈希值 / Hash</th>
                </tr>
                </thead>

                <tbody id="blocklist">
                {volist name="blockData" id="v" length='5'}
                <tr>
                    <td><button class="btn btn-success btn-sm block-height" data-toggle="modal" data-target="#heightModal">{$v['height']}</button></td>
                    <td>
                        {if condition="$v['pool_name'] heq null"}Unknown
                        {else /}<a href="#">{$v['pool_name']}</a>
                        {/if}
                    </td>
                    <td>{$v['tx_count']}</td>
                    <td><?php echo ($v['reward_block'] + $v['reward_fees']) / 100000000 ?> BTC</td>
                    <td>{$v['size']}</td>
                    <td><a href="#">{$v['hash']}</a>
                    </td>
                </tr>
                {/volist}
                </tbody>
            </table>
        </div>
    </div>
</div>
<!-- END BTC Block List -->

<!-- Echarts -->
<div class="container">
    <div class="panel panel-info">
        <div class="panel-heading">
            <h2>
                <i class="icon icon-bar-chart-alt icon-3x"></i>
                交易量与区块大小
            </h2>
        </div>
        <div class="panel-body">
            <div class="row">
                <div class="col-md-12">
                    <div id="main1"></div>
                </div>
            </div>

        </div>
    </div>

    <div class="clearfix"></div>

    <div class="row">
        <div class="col-md-6">
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h2>
                        <i class="icon icon-bar-chart-alt icon-3x"></i>
                        交易量与区块大小 <small>最新10个块区</small>
                    </h2>
                </div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-12">
                            <div id="main2"></div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h2>
                        <i class="icon icon-bar-chart-alt icon-3x"></i>
                        交易量与区块大小
                    </h2>
                </div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-12">
                            <div id="main3"></div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
<!-- END Echarts -->

<div class="container">
    <div class="col-lg-12 col-md-12 col-xs-12"><!--版权信息-->
        <p class="text-center ">
            Copyright&nbsp;©&nbsp;2017&nbsp;•&nbsp;<a href="http://weibo.com/sosdust" target="_blank"> 探索者丶枫</a>丨&nbsp;<a href="http://www.miitbeian.gov.cn" target="_blank">晋ICP备14006301号</a>
            <br>
            <a href="http://creativecommons.org/licenses/by-nc-sa/2.5/cn/" target="_blank">署名-非商业性使用-相同方式共享 2.5 中国大陆&nbsp;&nbsp;(CC BY-NC-SA 2.5 CN)</a>
        </p>
    </div>
</div>

<!-- 全屏模态框 -->
<div class="modal fade" id="heightModal">
    <div class="modal-dialog modal-fullscreen">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><i class="icon icon-times icon-3x"></i></button>
                <h1 class="modal-title">Block 区块摘要</h1>
            </div>
            <div class="modal-body">
                <div class="container">
                    <div class="row mt50">
                        <div class="col-md-8 col-md-offset-2">
                            <h1></h1>
                            <p></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



<script src="__ZUI__lib/jquery/jquery.js"></script>
<script src="__ZUI__js/zui.min.js"></script>
{block name="js"}
<script type="text/javascript">
    // 页面总控
    $(function (){
        window.data1 = {$mainData};// 接收折线图数据
        window.data3 = {$pool_100};// 100个块的矿工分组比例数据

        main1(); // 交易量与块大小 柱状图+折线图
        main3(); // 矿工出块 饼图

        // setTimeout(getOneBlock, 1500); // 开始更新单块信息
        // 查询指定块高度
        $('.block-height').click(function(){
            var height = $(this).html();
            getHeight(height);
        });
    });

    // 浏览器大小改变时 重置图表大小
    window.onresize = function () {
        myChartWidth1();
        myChart1.resize();
        myChartWidth3();
        myChart3.resize();
    };

    function getHeight(height){
        $.ajax({
            url: '/getHeight/' + height,
            type: 'get',
            dataType: 'json',
            success: function (data) {
                console.log(data);
                $('#heightModal .modal-body h1').html(data.height);
                $('#heightModal .modal-body p').html( '0x'+ data.version.toString(16));

            },
            error: function(){
                console.log('指定高度块数据查询失败!');
                return false;
            }
        });
    }


    function getOneBlock(){
        $.ajax({
            url: '/getOneBlock/',
            type: 'get',
            dataType: 'json',
            success: function (data) {
                // console.log(data);
                if (data.status) {
                    var blockMsg =
                        '<tr>' +
                            '<td><button class="btn btn-success btn-sm block-height">' + data.datas.height + '</button></td>' +
                            '<td>' + '<a href="#">' + data.datas.extras.pool_name + '</a></td>' +
                            '<td>' + data.datas.tx_count + '</td>' +
                            '<td>' + (((data.datas.reward_block + data.datas.reward_fees) / 100000000)) + ' BTC</td>' +
                            '<td>' + data.datas.size + '</td>' +
                            '<td><a href="#">' + data.datas.hash + '</a></td>' +
                        '</tr>';
                    // console.log($("#blocklist>tr").last());
                    $("#blocklist>tr").last().remove();
                    // console.log($(blockMsg));
                    $(blockMsg).show(2000).prependTo("#blocklist");
                } else {
                    console.log('暂无单块数据,5min后更新重试.');
                }
            },
            error: function () {
                console.log('AJAX 请求失败');
                return false;
            }
        });
        setTimeout(getOneBlock, 300000); // 每隔5分钟 更新一次数据
    }


    function main1() {
        // 获取和设置画板尺寸
        window.myChartWidth1 = function () {
            var main1 = $('#main1').parent().css('width');
            // console.log(main1);
            $('#main1').css('width', main1);
            $('#main1').css('height', 400);
        }
        myChartWidth1(); // 设置画板尺寸


        // 基于准备好的dom，初始化echarts实例
        window.myChart1 = echarts.init(document.getElementById('main1'));

        // 指定图表的配置项和数据
        option = {
            title : {
                text: '交易量与区块大小',
                // subtext: '最近1天的块区',
                x:'left'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            toolbox: {
                feature: {
                    dataView: {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                },
                right: '10%'
            },
            legend: {
                data:['区块大小','交易量']
            },
            xAxis: [
                {
                    type: 'category',
                    data: (function (){
                        var category = [];
                        for (var i = 0; i < data1.length; i++) {
                            category.push(data1[i].curr_max_timestamp);
                        }
                        return category.reverse(); // 正序数组
                    })(),
                    axisPointer: {
                        type: 'shadow'
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '区块大小',
                    min: 0,
                    max: 1200,
                    interval: 100,
                    axisLabel: {
                        formatter: '{value} kb'
                    }
                },
                {
                    type: 'value',
                    name: '交易量',
                    min: 0,
                    max: 4000,
                    interval: 500,
                    axisLabel: {
                        formatter: '{value} 笔'
                    }
                }
            ],
            series: [
                {
                    name:'交易量',
                    type:'line',
                    yAxisIndex: 1,
                    data:(function (){
                        var bar = [];
                        for (var i = 0; i < data1.length; i++) {
                            bar.push(data1[i].tx_count);
                        }
                        // console.log(bar);
                        return bar.reverse(); // 正序数组
                    })()
                },
                {
                    name:'区块大小',
                    type:'bar',
                    color: '#abcdef',
                    data: (function (){
                        var line = [];
                        for (var i = 0; i < data1.length; i++) {
                            line.push(data1[i].size/1024); // b转化为kb
                        }
                        // console.log(line);
                        return line.reverse(); // 正序数组
                    })()
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart1.setOption(option);
    }


    function main3() {
        // 获取和设置画板尺寸
        window.myChartWidth3 = function () {
            var main3 = $('#main3').parent().css('width');
            // console.log(main3);
            $('#main3').css('width', main3);
            $('#main3').css('height', 400);
        }
        myChartWidth3(); // 设置画板尺寸

        // 基于准备好的dom，初始化echarts实例
        window.myChart3 = echarts.init(document.getElementById('main3'));

        option = {
            title : {
                text: '矿工出块比例',
                subtext: '最新100个快',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'right',
                data: (function(){
                    var poolList = [];
                    for (var i in data3) {
                        poolList.push(i);
                    }
                    // console.log(poolList);
                    return poolList;
                })()
            },
            series : [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius : '55%',
                    center: ['40%', '60%'],
                    data:(function () {
                        var poolNameValue = [];
                        // 重组数据结构
                        for (var i in data3) {
                            var temp = {name:i, value:data3[i]};
                            poolNameValue.push(temp);
                            // console.log(i);
                        }
                        // console.log(poolNameValue);
                        return poolNameValue;
                    })(),
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart3.setOption(option);
    }

</script>
{/block}

</body>
</html>